<template>
  <div class="appeal-record">
    <el-table :data="appealList" style="width: 100%">
      <el-table-column prop="examName" label="考试名称" width="180">
        <template #default="{row}">
          <el-tag :type="row.examType | examTypeFilter" size="mini">
            {{ row.examType | examTypeNameFilter }}
          </el-tag>
          {{ row.examName }}
        </template>
      </el-table-column>
      <el-table-column prop="questionContent" label="题目内容">
        <template #default="{row}">
<!--          <div class="question-content" v-html="row.questionContent"></div>-->
          <formula-renderer class="question-content" v-html="row.questionContent" />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="120">
        <template #default="{row}">
          <el-tag :type="row.status | statusTagTypeFilter">
            {{ row.status | appealStatusFilter }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="appealTime" label="申诉时间" width="180">
        <template #default="{row}">
          {{ row.appealTime | formatDateTime }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="{row}">
          <el-button
            type="text"
            @click="handleViewDetail(row)"
            :disabled="row.status === 0">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 申诉详情对话框 -->
    <el-dialog
      title="申诉详情"
      :visible.sync="detailDialogVisible"
      width="60%"
      :close-on-click-modal="false"
    >
      <div class="appeal-detail">
        <div class="appeal-info">
          <div class="info-item">
            <span class="info-label">考试名称:</span>
            <span class="info-value">{{ currentAppeal.examName }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">申诉状态:</span>
            <el-tag :type="currentAppeal.status | statusTagTypeFilter">
              {{ currentAppeal.status | appealStatusFilter }}
            </el-tag>
          </div>
          <div class="info-item">
            <span class="info-label">申诉时间:</span>
            <span class="info-value">{{ currentAppeal.appealTime | formatDateTime }}</span>
          </div>
          <div class="info-item" v-if="currentAppeal.handleTime">
            <span class="info-label">处理时间:</span>
            <span class="info-value">{{ currentAppeal.handleTime | formatDateTime }}</span>
          </div>
          <div class="info-item" v-if="currentAppeal.handlerName">
            <span class="info-label">处理人:</span>
            <span class="info-value">{{ currentAppeal.handlerName }}</span>
          </div>
        </div>

        <div class="appeal-content">
          <h4>题目内容</h4>
<!--          <div class="question-content" v-html="currentAppeal.questionContent"></div>-->
          <formula-renderer class="question-content" v-html="currentAppeal.questionContent" />

          <h4>你的答案</h4>
<!--          <div class="answer-content" v-html="currentAppeal.answerContent"></div>-->
          <formula-renderer class="answer-content" v-html="currentAppeal.answerContent" />

          <h4>参考答案</h4>
<!--          <div class="correct-answer" v-html="currentAppeal.correctAnswer"></div>-->
          <formula-renderer class="correct-answer" v-html="currentAppeal.correctAnswer" />

          <h4>申诉内容</h4>
          <div class="appeal-text">{{ currentAppeal.appealContent }}</div>

          <template v-if="currentAppeal.status !== 0">
            <h4>处理结果</h4>
            <div class="handle-result">{{ currentAppeal.handleResult }}</div>

            <div v-if="currentAppeal.newScore !== null" class="score-change">
              <span>分数变更: </span>
              <span class="old-score">{{ currentAppeal.oldScore }}分</span>
              <i class="el-icon-right"></i>
              <span class="new-score">{{ currentAppeal.newScore }}分</span>
            </div>
          </template>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAppealList } from '@/api/exam/appeal'
import { parseTime } from "@/utils/quiz"
import FormulaRenderer from "@/components/FormulaRenderer/index.vue";

export default {
  name: 'AppealRecord',
  components: {FormulaRenderer},
  props: {
    groupId: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        groupId: this.groupId
      },
      appealList: [],
      total: 0,
      currentAppeal: {
        examName: '',
        status: 0,
        appealTime: null,
        handleTime: null,
        handlerName: '',
        questionContent: '',
        answerContent: '',
        correctAnswer: '',
        appealContent: '',
        handleResult: '',
        oldScore: null,
        newScore: null
      },
      detailDialogVisible: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getAppealList(this.queryParams).then(response => {
        console.log(response)
        this.appealList = response.rows
        this.total = response.total
      }).catch(error => {
        console.error('获取申诉记录失败:', error)
        this.$message.error('获取申诉记录失败')
      })
    },
    handleViewDetail(row) {
      this.currentAppeal = { ...row }
      this.detailDialogVisible = true
    }
  },
  filters: {
    examTypeFilter(type) {
      const map = {1: 'danger', 2: 'warning', 3: 'success'}
      return map[type] || ''
    },
    examTypeNameFilter(type) {
      const map = {1: '考试', 2: '测评', 3: '作业'}
      return map[type] || ''
    },
    appealStatusFilter(status) {
      const map = {
        0: '待处理',
        1: '处理中',
        2: '已通过',
        3: '已拒绝'
      }
      return map[status] || ''
    },
    statusTagTypeFilter(status) {
      const map = {
        0: 'info',
        1: 'warning',
        2: 'success',
        3: 'danger'
      }
      return map[status] || ''
    },
    formatDateTime(date) {
      if (!date) return '--'
      return parseTime(date, '{y}-{m}-{d} {h}:{i}')
    }
  }
}
</script>

<style scoped>
.appeal-record {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.question-content {
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.appeal-detail {
  padding: 0 20px;
}

.appeal-info {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.info-item {
  width: 50%;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.info-label {
  color: #909399;
  margin-right: 10px;
  width: 80px;
  text-align: right;
}

.info-value {
  flex: 1;
}

.appeal-content h4 {
  margin: 15px 0 10px;
  color: #303133;
}

.question-content,
.answer-content,
.correct-answer {
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  margin-bottom: 15px;
}

.appeal-text,
.handle-result {
  padding: 10px;
  background: #f5f7fa;
  border-radius: 4px;
  white-space: pre-wrap;
}

.score-change {
  margin-top: 15px;
  padding: 10px;
  background: #f0f9eb;
  border-radius: 4px;
  display: flex;
  align-items: center;
}

.score-change .old-score {
  color: #f56c6c;
  margin: 0 10px;
}

.score-change .new-score {
  color: #67c23a;
  margin-left: 10px;
}

.score-change i {
  color: #909399;
}
</style>
